<template>
  <div class="common-layout">
    <el-container>
      <el-header
        style="width: 100%;height:4rem;display: flex; justify-content: space-between; align-items: center;background-color: white;">
        <div style="width:12.5rem;height: 80%;display: flex;align-items: center;box-shadow: 10px 5px 10px #f1f1f1;">
          <img src="/logo.png" style="width: 25%;height: 100%;border-radius: 7px;">
          <span style="color:#fca432;font-weight: bold;">美容美发管理系统</span>
        </div>
        <div style="width: 70%;display: flex; align-items: center;justify-content: center">
          <!-- <dv-button style="font-size: 20px;width: 80%;height: 100%;text-align: center;"
            @click="console.log('click')">美容美发后台管理系统</dv-button> -->
          <h3>{{ salodName }}</h3>
        </div>
        <div style="width: 15%;height: 80%;display: flex;
        justify-content: space-evenly;
        align-items: center;">
          <img src="/user.png" style="width: 20%;height: 100%;;border-radius: 50%;">
          <span>{{ store.info.name ? store.info.name : "管理员" }}</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px"
          style="height: calc(100vh - 4rem);background-color: white;box-shadow: 10px 10px 10px #f1f1f1;">
          <el-menu :unique-opened="true" active-text-color="#fca432" background-color="white"
            style="--el-menu-hover-bg-color:rgba(250,165,48,0.2);padding:5px 10px;box-sizing: border-box;"
            class="el-menu-vertical-demo" default-active="/home" text-color="" @open="handleOpen" @close="handleClose"
            router>
            <el-menu-item index="/home" style="border-radius: 7px;">
              <el-icon><icon-menu /></el-icon>
              <span><el-icon>
                  <Platform />
                </el-icon>首页</span>
            </el-menu-item>
            <el-sub-menu index="/home" style="border-radius: 7px;">
              <template #title>
                <span>客户管理</span>
              </template>
              <el-menu-item index="/home/user"
                style="border-radius: 7px;--el-menu-hover-bg-color:rgba(250,165,48,0.2);--active-text-color:#fca432;"><el-icon>
                  <UserFilled />
                </el-icon>客户信息</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3" v-if="store.info._id == '66d6c2d21cfae588ecb2fbcd'"
              style="border-radius: 7px;--active-text-color:#fca432;">
              <template #title>
                <span>商家管理</span>
              </template>
              <el-menu-item index="/home/vendor"
                style="border-radius: 7px;--el-menu-hover-bg-color:rgba(250,165,48,0.2);--active-text-color:#fca432;">
                <el-icon>
                  <Menu />
                </el-icon>商家信息</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/home/worker" v-if="store.info._id != '66d6c2d21cfae588ecb2fbcd'"
              style="border-radius: 7px;--active-text-color:#fca432;">
              <el-icon>
                <Flag />
              </el-icon>
              <span>员工管理</span>
            </el-menu-item>

            <el-menu-item index="/home/order" v-if="store.info._id != '66d6c2d21cfae588ecb2fbcd'"
              style="border-radius: 7px;--active-text-color:#fca432;">
              <el-icon>
                <Document />
              </el-icon>
              <span>订单管理</span>
            </el-menu-item>

            <el-menu-item index="/home/market" v-if="store.info._id != '66d6c2d21cfae588ecb2fbcd'"
              style="border-radius: 7px;--active-text-color:#fca432;">
              <el-icon>
                <TrendCharts />
              </el-icon>
              <span>营销</span>
            </el-menu-item>
            <el-menu-item index="/home/my" v-if="store.info._id != '66d6c2d21cfae588ecb2fbcd'"
              style="border-radius: 7px;--active-text-color:#fca432;">
              <el-icon>
                <Shop />
              </el-icon>
              <span>我的店铺</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="height: calc(100vh - 4rem);">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { Platform, Menu, UserFilled, Flag, Document, TrendCharts, Shop } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter.js'
import { computed, ref } from 'vue'
import { get } from '@/util/request'

const salodName = computed(() => {
  return store.salodName
})


const store = useCounterStore()
const info = computed(() => store.info)
console.log(info);

</script>
<style scoped>
span:hover {
  color: #fca432;
  ;
}

.el-main {
  background: #f7f7f7;
}
</style>
